<template>
  <div class="flex-center flex-col text-[12px] text-white gap-[6px] py-[20px]">
    <div class="flex items-center divide-x-2">
      <div
        v-for="(item, index) in policyItems"
        :key="index"
        class="px-[20px] leading-[12px] hover:underline transition-all"
      >
        <a :href="getTargetUrl(item.path)">
          {{ item.name }}
        </a>
      </div>
    </div>
    <div>© {{ new Date().getFullYear() }} {{ siteName }}. All rights reserved.</div>
  </div>
</template>

<script lang="ts" setup>
import { useConfigStore } from "~/composables/useConfigStore";
import { policyItems } from "./data";

const { config } = useConfigStore();
const { siteName } = config.value;
</script>

<style scoped></style>
